Emmet과 단축키

✒️ 2025-05-15 15:59 내용 수정

Emmet

HTML, XML 등의 문서를 빠르게 코딩할 수 있는 플러그인

키	설명
`!`	html 문서 서식 생성
`>`	자식 요소 생성 상위, 하위 태그 동시 생성 `태그>하위태그`
`^`	상위 요소로 이동 `태그>하위^상위`
`*`	태그 n개 생성 `태그*n`
`{}`	태그 생성 시 태그 내용을 함께 추가하여 생성 `태그{내용}`
`()`	그룹화 `태그>(하위)` 등
`$`	태그 생성 시 순차적 숫자 및 내용을 함께 생성 `태그{$}`
`+`	태그의 형제 요소를 함께 생성 `태그+태그`
`태그.클래스명`	클래스명을 가지는 태그 생성
`태그#id명`	id명을 가지는 태그 생성
`태그[속성=속성값]`	속성과 속성값이 있는 태그를 생성

<!-- tr 태그 1개와 하위 태그 td 태그를 4개 생성. 1-1, 1-2, 1-3, 1-4 내용을 가짐  -->
tr>td*4{1-$}

<!-- 결과 -->
<tr>
  <td>1-1</td>
  <td>1-2</td>
  <td>1-3</td>
  <td>1-4</td>
</tr>

<!-- tr 태그와 하위 태그 th, td를 형제 요소로 생성 -->
tr>th+td

<!-- 결과 -->
<tr>
  <th></th>
  <td></td>
 </tr>

<!-- 클래스와 이름이 순차적인 section 태그를 3개 생성 -->
section.sec$*3{섹션$}

<!-- 결과 -->
<section class="sec1">섹션1</section>
<section class="sec2">섹션2</section>
<section class="sec3">섹션3</section>

단축키

단축키	설명
`Ctrl + S`	저장
`Ctrl + ,`	설정
`Ctrl + C`	해당 커서의 줄 복사
`Alt + 줄 클릭`	다중 커서
`Ctrl + Alt + 화살표`	다중커서(키보드)
`Ctrl + Shift + X`	view-extension 열기
`Shift + Alt + R`	파일 탐색기에서 파일 확인(순서 중요)
`Shift + Alt + F`	자동 서식
`Ctrl + space`	자동 완성
`Ctrl + /`	주석
`Shift + 방향키`	커서 드래그
`Ctrl + F`	검색
`Ctrl + H`	검색 및 단어 변경